<template>
  <div class="commit-main-box">
    <img :src="avatar" class="avatar"
      :style="{ width: (type == 'reply') ? '25px' : '45px', height: (type == 'reply') ? '25px' : '45px' }" />
    <div class="second-column">
      <div class="username">{{ username }}<span style="margin-left:10px" class="content" v-if="type == 'reply'">{{
          content
      }}</span></div>
      <div class="content" v-if="type != 'reply'">{{ content }}</div>
      <div class="bottom">
        <div class="date">{{ date }}</div>
        <img src="@/assets/like.svg" class="like" @click='likeCommit' v-if="!isLike" />
        <img src="@/assets/like_fill.svg" class="like" @click='likeCommit' v-else />
        <div class="like-number">{{ like }}</div>
        <div style="cursor: pointer;" @click="replyShow(username)" v-if="(type == 'commit')">回复</div>
      </div>
      <slot></slot>
      <div style="margin-top:15px;" v-if="isReplyShow">
        <SendCommit :placeholder="replyTo" :avatar="userInfo.avatar" :type="2" :commitId="commitId"></SendCommit>
      </div>
    </div>
  </div>
  <el-divider v-if="type != 'reply'"></el-divider>
</template>

<script setup>
import { ref } from 'vue'
import { commitLike, replyLike } from '@/api.js'
import SendCommit from '@/components/article/SendCommit.vue'
import { ElMessage } from "element-plus";
const props = defineProps({
  type: String,
  username: String,
  like: Number,
  avatar: String,
  date: String,
  content: String,
  commitId: String,
  isLike: Boolean,
  replyId: String
})
const like = ref(props.like)
const isLike = ref(props.isLike)
console.log(props.articleId);
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const isReplyShow = ref(false)
const replyTo = ref('')
const replyShow = (username) => {
  replyTo.value = '回复 @' + username + ':';
  isReplyShow.value = !isReplyShow.value;
}

const likeCommit = () => {
  if (props.type == 'commit') {
    commitLike(props.commitId, !isLike.value, userInfo.uuid).then(res => {
      console.log(res);
      if (res.success) {
        isLike.value = !isLike.value;
        ElMessage({
          message: "点赞成功",
          type: "success",
        });
        if (isLike.value) {
          like.value++;
        }
        else {
          like.value--;
        }
      }
      else {
        ElMessage({
          message: "点赞失败",
          type: "error",
        });
      }
    })

  }
  else {
    replyLike(props.replyId, !isLike.value, userInfo.uuid).then(res => {
      console.log(res);
      if (res.success) {
        isLike.value = !isLike.value;
        ElMessage({
          message: "点赞成功",
          type: "success",
        });
        if (isLike.value) {
          like.value++;
        }
        else {
          like.value--;
        }
      }
      else {
        ElMessage({
          message: "点赞失败",
          type: "error",
        });
      }

  })
}
}
</script>

<style scoped>
.commit-main-box {
  display: flex;
  margin-top: 15px;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 100px;
  margin-right: 15px;
}

.content {
  font-size: 15px;
  margin-top: 10px;
  color: black;
  line-height: 24px;
}

.second-column {}

.username {
  font-size: 14px;
  color: rgba(109, 117, 122, 1);
  font-weight: 500;
}

.bottom {
  display: flex;
  font-weight: 400;
  color: rgba(109, 117, 122, 1);
  font-size: 13px;
  align-items: center;
  margin-top: 10px;
}

.date {
  margin-right: 35px;
}

.like {
  font-size: 20px;
  margin-right: 4px;
  height: 1em;
  width: 1em;
  cursor: pointer;
}

.like-number {
  margin-right: 26px;
}
</style>